<template>
<div class="body">
<el-form :model="registry" class="border mx-auto"></el-form>
<div class="registry_box">
     <el-form-item style="margin-top: 15px">
        <div class="fs-2 mx-auto">注册</div>
    </el-form-item>
    <el-form-item>
        <el-input v-model="registry.username" class="w-25 mx-auto" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
        <el-input v-model="registry.password" class="w-25 mx-auto" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
        <el-input v-model="registry.email" class="w-25 mx-auto" placeholder="you@email.com"></el-input>
    </el-form-item>
    <el-form-item class="w-25 mx-auto">
        <el-button type="primary" @click="registryAction">注册</el-button>
        <el-button type="success">重写</el-button>
    </el-form-item>
    <el-form-item>
        <div class="mx-auto">
            注册即表示您愿意并遵守用户协议和隐私政策
        </div>
    </el-form-item>
    <el-form-item>
        <div class="mx-auto w-25">
            已有账户，立即 <router-link to="/login">登录</router-link>
        </div>
    </el-form-item>
</div>
    </div>
</template>

<script>
export default {
    name: 'RegistryFrame',
    data() {
        return {
            //注册时，需要绑定的数据
            registry: {
                username: null,//绑定用户名
                password: null,//密码
                confirmPass: null,//确认密码
                 authorName: null,//笔名

            },        
        };
    },
    methods:{
        registryAction(){
            if(this.registry.password == this.registry.confirmPass){
                this.$axios
                .post('/api/registry',this.registry)
                .then(response =>{
                    let data = response.data;
                    if(data.code==200){
                        this.$router.push('/login')
                     }else{
                        alert(data.msg);
                    }
                })
            }else{
                alert('两次密码输入不一致')
            }
        }
    }
}
    
    
    
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url("@/assets/下载.png");
}
.registry_box{
    width: 536px;
    height: 380px;
    /* background-color: #ffffff; */
    background: rgba(255,255,255,0.3);
    opacity: 0.85;
    filter: alpha(opacity=90);
    position: absolute;
    left: 50%;
    top:45%;
    transform: translate(-50%,-50%);
    
}
</style>